<template>
  <div style="width: 100%;height: 100%;">
    <el-backtop :bottom="60"></el-backtop>
<!--    轮播图-->
    <div style="margin: 10px 0;">
      <el-carousel height="450px" :interval="10000">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" style="width: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>

<!--    疾病查询-->
    <div style="border: 1px solid beige; border-radius: 10px; margin-top: 10px; padding-bottom: 10px">
      <h2 style="color: #0d6efd; padding-left: 10px">快速找医生</h2>
    <el-popover
      placement="top-start"
      width="400"
      trigger="hover"
      v-for="item in deps"
      :key="item.id">
      <el-row :gutter="4">
        <el-col :span="8" v-for="dis in item.diseaseList" :key="dis.id">
          <div style="padding: 14px;float: left;">
            <el-link type="primary" @click="$router.push({path: '/front/DisInfo',query: {disId: dis.id}})">{{dis.name}}</el-link><br/>
          </div>
        </el-col>
      </el-row>
      <el-button slot="reference">{{item.name}}</el-button>
    </el-popover>
  </div>

<!--    特色功能-->
<!--    <div style="margin-top: 20px; margin-bottom: 20px">
      <span style="color: #0d6efd">特色功能：</span>
      <el-button @click="$router.push('/front/duoWen')">一病多问</el-button>
    </div>-->

<!--    根据科室查疾病-->
<!--    v-model="value"-->
<!--    <div>
      <el-cascader-panel
        :props="props">
      </el-cascader-panel>
    </div>-->

<!--    查看医院-->
    <div style="margin: 10px 0" >
      <el-link style="float: right;margin: 20px 20px 10px" type="primary" plain @click="$router.push('/front/hospital')">全部医院</el-link>
      <h2 style="color: #0d6efd; padding-left: 10px">推荐医院</h2>
      <el-tabs type="border-card" v-model="pro" @tab-click="hoverClick">
        <el-tab-pane v-for="item in provinces" :key="item.id" :label="item.name" :name="item.name" :data-item="JSON.stringify(item)">
          <el-row :gutter="2">
            <el-col :span="6" v-for="hos in hospitals" :key="hos.id" style="margin-bottom: 5px">
              <el-card :body-style="{ padding: '0px' }">
                <el-avatar style="margin-left: 10px; margin-top: 10px; float: left" shape="square" :size="100" :src="hos.picture"></el-avatar>
                <!--                <img :src="dep.photo" class="image" style="width: 100px; height: 100px;">-->
                <div style="padding: 14px;float: left; width: 150px;">
                  <el-link type="primary" @click="$router.push({path: '/front/HosInfo',query:{hosId: hos.id}})">{{hos.name }}</el-link><br/>
                  <span class="s1">{{hos.grade}}</span><br/>
                  <span class="s1" style="text-align: left; width: 160px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;">电话：{{hos.phone}}</span>
<!--                  <div class="bottom clearfix">
                    <span v-for="hos in hospitals" :key="hos.id">{{hos.name}}</span><br/>
                  </div>-->
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>

<!--快速问诊-->
    <div style="padding: 10px 0">
      <h2 style="color: #0d6efd; padding-left: 10px">一病多问</h2>
      <el-input style="width: 90%" size="medium" placeholder="输入想要咨询的问题，查看是否被咨询过" suffix-icon="el-icon-search" v-model="problem"></el-input>
      <el-button class="ml-5" size="medium" type="primary" @click="$router.push({path: '/front/duoWen', query: {problem: problem}})" plain>我要提问</el-button>
    </div>

<!--    根据科室查医生-->
    <div style="margin: 30px 0" >
      <el-link style="float: right;margin: 20px 20px 10px" type="primary" plain @click="$router.push('/front/physicianList')">全部医师</el-link>
      <h2 style="color: #0d6efd; padding-left: 10px">推荐医师</h2>
      <el-tabs type="border-card" v-model="depType" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in departments" v-if="index < 10" :key="item.id" :label="item.name" :name="item.name" :data-item="JSON.stringify(item)">
          <el-row :gutter="5">
            <el-col :span="6" v-for="dep in physicians" :key="dep.id">
              <el-card :body-style="{ padding: '0px' }">
                  <el-avatar style="margin-left: 90px; margin-top: 10px" shape="circle" :size="100" :src="dep.photo"></el-avatar>
<!--                <img :src="dep.photo" class="image" style="width: 100px; height: 100px;">-->
                <div style="padding: 14px;">
                  <span style="color: #0d6efd">{{dep.nickname }}</span> <span>{{dep.identity}}</span>

                  <div class="bottom clearfix">
                    <span style="color: dimgrey; font-size: 10px;
                          width: 250px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;"
                    :title="dep.specialty">
                      擅长：{{ dep.specialty }}
                    </span>
                    <span class="擅长" style="line-height:1.5; font-size: 10px;
                    text-align: left; width: 140px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;
"></span>
                    <router-link :to="{path:'/front/phyInfo',query: {physician: dep,flag: 'home'}}">
                      <el-button type="text" class="button">详细资料</el-button>
                    </router-link>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <!--            <el-col :span="6" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="physicians[0].photo" class="image">
                <div style="padding: 14px;">
                  <span>{{ physicians[0].nickname }}</span>
                  <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">操作按钮</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>-->

    </div>
    <div style="border: 1px solid beige; border-radius: 10px; margin-top: 10px">
      <el-link style="float: right;margin: 20px 20px 10px" type="primary" plain @click="$router.push('/front/articleList')">更多</el-link>
      <h2 style="color: #0d6efd; padding-left: 10px">健康资讯</h2>

      <el-row :gutter="5">
        <el-col :span="6" v-for="(item,index) in articles" :key="item.id" v-if="index < 4">
          <el-card :body-style="{ padding: '0px' }">
            <el-avatar style="margin-left: 45px; margin-top: 10px" shape="square" :size="200" :src="item.cover"></el-avatar>
<!--            <img :src="item.cover" class="image" style="width: 200px; height: 200px; margin: 0 auto ">-->
            <div style="padding: 14px;">
              <el-link type="primary" @click="$router.push({name: 'Article',query:item.id})">
                <span style="width: 160px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;" :title="item.title">{{item.title }}</span>
              </el-link>
              <span style="float: right; ">{{item.date }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: "FrontHome",
  data() {
    return {
      imgs: [
        'https://nwzimg.wezhan.cn/contents/sitefiles2035/10178445/images/11826597.jpg',
        'https://ts1.cn.mm.bing.net/th/id/R-C.d8caa601bea4aacc7b541288ba4836a5?rik=cgGYoCVmsMc%2bLw&riu=http%3a%2f%2fwww.199it.com%2fwp-content%2fuploads%2f2016%2f03%2f1459330015-3686-future-of-medicine-with-ehr.jpg&ehk=ql%2fTUiuAGVMsfs2v2HllYFumeAKiJlFNgjdRWLpJVo8%3d&risl=&pid=ImgRaw&r=0',
        'https://ts1.cn.mm.bing.net/th/id/R-C.10c95a60a47eff44c4b1591df5ef50af?rik=f1eRvJkV8gorJQ&riu=http%3a%2f%2fwww.djkpai.com%2fu%2fcms%2fwww%2f201907%2f0111154918m1.jpg&ehk=Ofea5sG1Lx8yNRPtVsOd5dy71PRbI%2f%2bjIPyyoz%2b%2f%2flM%3d&risl=&pid=ImgRaw&r=0'
      ],
      currentDate: new Date(),
      physicians: {},
      depType: "",
      deps: {},
      dep: {},
      departments: {},
      informationArticle: "",
      articles: {},
      provinces: [],
      problem: "",
      pro: "",
      hospitals: {},
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const {level} = node;
          setTimeout(() => {
            const nodes = null
          }, 1000);
        }
      }
    }
    /*props: {
        lazy: true,
        lazyLoad (node, resolve) {
          fetch('http://localhost:8082/department/list').then(res => res.json().then(res => {
            const nodes = res.map(v => ({
              value: v.id,
              label: v.name
            }))
          }))
        }
      }*/

  },
  created() {
    this.findDep()
    this.findHosByArea()
    this.findPhyByDep()
    this.request.get("/information/list").then(res => {
      console.log(res)
      this.articles = res
      console.log(this.articles)
    })

  },
  methods: {
    findDep(){
      this.request.get("/department/list").then(res => {
        console.log(res)
        this.deps = res
      })
    },
    findHosByArea(){
      this.request.get("/province/list").then(res => {
        //console.log(res)
        this.provinces = res
        this.pro = this.provinces[0].name
        let p = this.provinces[0]
        //console.log(this.pro)
        this.request.post("/hospital/findHosByProvince?id=" + p.id).then(res => {
          //console.log(res)
          this.hospitals = res
        })
      })
    },
    findPhyByDep(){
      this.request.get("/physician/findDep").then(res => {
        //console.log(res)
        this.departments = res
        this.depType = this.departments[0].name
        //console.log(this.departments[0].disId)
        let dep = this.departments[0]
        this.request.post("/physician/selectPhyByDep",dep).then(res => {
          //console.log(res)
          this.physicians = res
        })
      })
    },
    hoverClick(el) {
      let pro = JSON.parse(el.$el.dataset.item)
      //console.log(pro)
      this.request.post("/hospital/findHosByProvince?id=" + pro.id).then(res => {
        //console.log(res)
        this.hospitals = res
      })
    },
    handleClick(el) {
      //console.log(JSON.parse(el.$el.dataset.item))
      this.dep = JSON.parse(el.$el.dataset.item)
      //console.log(this.dep)
      this.request.post("/physician/selectPhyByDep",this.dep).then(res => {
        //console.log(res)
        this.physicians = res
      })
    },
    //当渲染的文字超出30字后显示省略号
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 150) {
        return value.slice(0, 150) + "...";
      }
      return value;
    },
    loadDep(DepId){
      /*this.request.post('http://localhost:8082/department/findDis?id=' + DepId).then(res => res.json()).then(res => {
        console.log(res)
        return res
      })*/
      this.request.post("/department/findDis?id=" + DepId).then(res => {
        console.log(res)
      })
    },
    // 监听数据变化
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

<style scoped>
p{
  margin-left: 0px;
  padding-left: 0px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
